<template>
  <div class="form-group">
    <label>题型设置：</label>
    <div class="question-types">
      <div class="type-item" v-for="(type, key) in questionTypes" :key="key">
        <label>
          <input 
            type="checkbox" 
            :checked="type.enabled"
            @change="updateEnabled(key, $event.target.checked)"
          />
          {{ getTypeLabel(key) }}
        </label>
        <input 
          type="number" 
          :value="type.count"
          @input="updateCount(key, $event.target.value)"
          min="0" 
          :max="getMaxCount(key)"
          :disabled="!type.enabled"
          placeholder="题数"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { onMounted } from 'vue'
import { useConfig } from '../../composables/useConfig.js'

export default {
  name: 'QuestionTypeSettings',
  props: {
    modelValue: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['update:modelValue'],
  setup() {
    const { loadConfig, getQuestionTypeOptions } = useConfig()

    // 组件挂载时加载配置
    onMounted(async () => {
      try {
        await loadConfig()
      } catch (error) {
        console.warn('题型设置组件配置加载失败:', error)
      }
    })

    return {
      getQuestionTypeOptions
    }
  },
  computed: {
    questionTypes() {
      return this.modelValue
    }
  },
  methods: {
    getTypeLabel(key) {
      const typeMap = {
        choice: '选择题',
        fill: '填空题',
        answer: '解答题'
      }
      return typeMap[key] || key
    },
    
    getMaxCount(key) {
      const questionTypeOptions = this.getQuestionTypeOptions()
      return questionTypeOptions[key]?.maxCount || 20
    },

    updateEnabled(key, enabled) {
      const newValue = {
        ...this.modelValue,
        [key]: {
          ...this.modelValue[key],
          enabled
        }
      }
      this.$emit('update:modelValue', newValue)
    },

    updateCount(key, count) {
      const newValue = {
        ...this.modelValue,
        [key]: {
          ...this.modelValue[key],
          count: parseInt(count) || 0
        }
      }
      this.$emit('update:modelValue', newValue)
    }
  }
}
</script>

<style scoped>
.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
}

.question-types {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.type-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.type-item label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  font-weight: normal;
  cursor: pointer;
}

.type-item input[type="number"] {
  width: 80px;
  padding: 0.5rem;
  border: 1px solid #cbd5e0;
  border-radius: 4px;
  font-size: 0.9rem;
}

.type-item input[type="number"]:disabled {
  background-color: #e2e8f0;
  color: #a0aec0;
  cursor: not-allowed;
}

.type-item input[type="number"]:focus {
  outline: none;
  border-color: #667eea;
}
</style>